<template>
    
    
    <div>

        <el-col align="center">
        <el-avatar
          :size="100"
          :src="require('../assets/images/logo.png')"
        ></el-avatar>
      </el-col>
        <el-card shadow="always" class="el-cardcss">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户ID">
                    <el-input v-model="form.UserID"  style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="form.goodName"  style="width: 300px;" ></el-input>
                </el-form-item>
                <el-form-item label="期望价格">
                    <el-input v-model="form.BuyerPrice"  style="width: 300px;" ></el-input>
                </el-form-item>
                <el-form-item label="购买区域">
                    <el-select v-model="form.region" placeholder="请选择购买区域" >
                    <el-option label="全国" value="shanghai" ></el-option>
                    <el-option label="全球" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="心愿截至">
                    <el-col :span="3">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"  style="width: 150px;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="0">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2"  style="width: 150px;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="open">立即创建</el-button>
                    <el-button  @click="goShopping">取消</el-button>  
                  
                </el-form-item>
                </el-form>

                 <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
                <span>我来啦!</span>
                </el-drawer>

        </el-card>
                
               

                
    </div>    
   
</template>

<script>
  export default {
    data() {
            return {
                form: {
                goodName: '',
                BuyerPrice:'',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                desc: '',
                 drawer: false, 
                },
                formLabelWidth: '80px',
                timer: null,
            }
            },
            methods: {
                    onSubmit() {
                            console.log('submit!');
                        },

                    goShopping(){
                            this.$router.push("/Shopping");
                        },
                     open() {
                            this.$confirm('心愿单各项信息如下所示', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                            }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });          
                            });
                        },
                        
            
                        }
                }
</script>

<style scoped>
.el-cardcss {
    min-width: 180px;
    margin-right: 20px;
    transition: all .5s;
  }
  

</style>